
import  { useEffect } from 'react';
import { message, Spin, Card, Result } from 'antd';
import {  LoadingOutlined } from '@ant-design/icons';

const OAuthCallback = () => {


    useEffect(() => {
        const handleOAuth = async () => {
            try {
                const code = new URLSearchParams(window.location.search).get('token');

                if (!code) {
                    message.error('授权参数不完整');
                    return;
                }

                localStorage.setItem('token', code);

                setTimeout(() => {
                    window.location.href = '/';
                }, 1000)

            } catch (error) {
                message.error('授权失败：' + (error as Error).message);
            }
        };

        handleOAuth();
    }, []);

    // 自定义 Loading 图标
    const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

    return (
        <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '100vh',
        }} className="flex items-center justify-center min-h-screen bg-gray-50">
            <Card
                style={{
                    width: 400,
                    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
                    borderRadius: '8px'
                }}
                className="flex flex-col items-center" // 添加居中样式
            >
                <Result
                    className="flex flex-col items-center" // 添加居中样式
                    icon={
                        <div className="flex flex-col items-center justify-center"> {/*  */}
                            <Spin indicator={antIcon} />
                        </div>
                    }
                    title={
                        <div className="text-center text-xl font-medium">
                            正在处理授权
                        </div>
                    }
                    subTitle={
                        <div className="text-center space-y-2">
                            <p className="text-gray-500">请稍候，我们正在验证您的身份</p>
                        </div>
                    }
                />
            </Card>
        </div>
    );
};

export default OAuthCallback;